<template>
  <view class="component dropdown-view">
    <up-dropdown ref="elRef">
      <!-- 日期面板 -->
      <up-dropdown-item :title="label1" v-model="value1">
        <view class="slot-content date-dropdown" style="background-color: #FFFFFF;">
          <view class="date-type-area">
            <view
              :class="`item ui-button button--default ${item.value == curDateType.value && 'active'} ${item.value == 3 ?? 'custom'}`"
              v-for="(item) in dateButtons"
              :key="item.value"
              @tap="handleChooseDateType(item)"
            >
              <up-icon :name="item.value === curDateType.value ? 'arrow-down' : 'arrow-up'" v-if="item.value == 3"></up-icon>
              {{ item.label }}
            </view>
          </view>
          <view class="date-show-area" v-if="isShowCustomDate">
            <view
              ref="startDateRef"
              :class="`item ui-button ${curDateStartOrEnd == 'start' ? 'button-function--active' : 'button--default'} button-size--middle`"
              @tap="handleClickDateShowButton('start')"
              >{{ startDate }}</view
            >
            <view class="line">-</view>
            <view
              ref="endDateRef"
              :class="`item ui-button ${curDateStartOrEnd == 'end' ? 'button-function--active' : 'button--default'} button-size--middle`"
              @tap="handleClickDateShowButton('end')"
              >{{ endDate }}</view
            >
          </view>
          <view class="calendar-area" v-show="isShowCustomDate">
            <CalendarView
              v-model="calendarValue"
              :key="curDateStartOrEnd"
              :minDate="minDateRef"
              :maxDate="maxDateRef"
              @change="handleDateChange"
            ></CalendarView>
          </view>
          <view class="buttons-area">
            <view class="ui-button button--default button-size--large" @tap="hanldleCloseDateDropdown">取消</view>
            <view class="ui-button button-size--large" @tap="handleConfirmDateDropdown">确定</view>
          </view>
        </view>
      </up-dropdown-item>
      <!-- 状态栏面板 -->
      <up-dropdown-item v-model="value2.data" :title="label2" :options="statusOption" @change="handleChangeStatus">
        <view class="slot-content status-dropdown">
          <ListItemView
            v-for="item in statusOption"
            :data="{text: item.label, value: item.value, checked: item.value == value2.data}"
            @selected="handleSelectedStatus"
          />
        </view>
      </up-dropdown-item>
      <!-- 店铺面板 -->
      <up-dropdown-item v-model="value3.data" :title="label3" :options="storesOption" @change="handleChangeStores">
        <view class="slot-content stores-dropdown">
          <ListItemView
            v-for="item in storesOption"
            :data="{text: item.label, value: item.value, checked: item.value == value3.data}"
            @selected="handleSelectedStores"
          />
        </view>
      </up-dropdown-item>
    </up-dropdown>
  </view>
</template>

<script setup>
import dayjs from 'dayjs';
import { onLoad } from '@dcloudio/uni-app';
import CalendarView from '../calendar-view/calendar-view';
import ListItemView from '@/components/base-components/list-item-view/list-item-view';

const props = defineProps({
  modelValue: {
    type: Object,
    default: {}
  },
});

const emit = defineEmits('update:modelValue');

const elRef = ref(null);
const dateButtons = [
  {
    label: '今日',
    value: 0,
  },
  {
    label: '本月',
    value: 1,
  },
  {
    label: '上月',
    value: 2,
  },
  {
    label: '自定义',
    value: 3,
  },
];

const statusOption = [{
  label: '全部',
  value: 1,
},
{
  label: '盘点中',
  value: 2,
},
{
  label: '盘点完成',
  value: 3,
},
{
  label: '已汇总',
  value: 4,
}
];
const storesOption = [{
  label: '全部',
  value: 1,
},
{
  label: '门店1',
  value: 2,
},
{
  label: '门店2',
  value: 3,
},
{
  label: '门店3',
  value: 4,
}
];

const value1 = reactive(props.modelValue[0]);
const value2 = reactive(props.modelValue[1]);
const value3 = reactive(props.modelValue[2]);

const label1 = ref('今日');
const label2 = ref('单据状态');
const label3 = ref('盘点门店');

const startDate = ref(null);
const endDate = ref(null);

const calendarValue = ref(value1.data[0]); // 日期面板值
const curDateType = reactive({ value: 1, label: '今日' }); // 日期类型默认今天
const curDateStartOrEnd = ref('start');

const isShowCustomDate = computed(() => curDateType.value == 3);
const minDateRef = ref(null);
const maxDateRef = ref(null);

const now = dayjs().format('YYYY-MM-DD');

const hanldleClose = () => {
  elRef.value.close();
}
// 点击日期下拉确认按钮
const handleConfirmDateDropdown = () => {
  value1.type = curDateType.value;
  // value1.data = calendarValue.value;
  // 自定义
  if (curDateType.value == 3) {
    label1.value = `${startDate.value} - ${endDate.value}`;
    value1.data = [startDate.value, endDate.value];
  } else {
    label1.value = curDateType.label;
    value1.data = [curDateType.value];
  }
  console.log('value1', value1);

debugger
  emitFn();
  hanldleClose();
}

const hanldleCloseDateDropdown = () => {
  hanldleClose();
}
// 选择状态
const handleSelectedStatus = ({value: v}) => {
  const label = statusOption.find(item => item.value == v).label;
  value2.data = v;
  label2.value = label;
  emitFn();

  hanldleClose();
}

// 选择店铺
const handleSelectedStores = ({value: v}) => {
  const label = storesOption.find(item => item.value == v).label;
  value3.data = v;
  label3.value = label;
  emitFn();

  hanldleClose();

}

// 选择日期类型
const handleChooseDateType = (item) => {
  Object.assign(curDateType, item);
  // 当没有值的时候给默认当前值为默认值
  if (curDateType.value == 3) {
    // dayjs 获取当前的日期
    const now = dayjs().format('YYYY-MM-DD');
    value1.data = [now, now];

    startDate.value = now;
    endDate.value = now;
  }
}

// 点击开始日期 结束日期
const handleClickDateShowButton = (flag) => {
  curDateStartOrEnd.value = flag;
  initDateRange();
}

// 写入显示当前的日期
watch(() => calendarValue.value, (val) => {
  if (curDateStartOrEnd.value == 'start') {
    // 开始时间设置
    startDate.value = val;

  } else {
    // 结束时间设置
    endDate.value = val;
  }
});

function emitFn() {


  console.log('emitFn', [
    { ...value1 },
    { ...value2 },
    { ...value3 }
  ]

  );
  emit('update:modelValue',  [
    { ...value1 },
    { ...value2 },
    { ...value3 }
  ])
}

  const initDateRange = () => {
    const startDateVal = startDate.value;
    const endDateVal = endDate.value;
    // 开始日期
    if (curDateStartOrEnd.value == 'start') {
      minDateRef.value = dayjs(startDateVal).subtract(10, 'year').valueOf();
      maxDateRef.value = dayjs(endDateVal).valueOf()
    } else {
      minDateRef.value = dayjs(startDateVal).valueOf();
      maxDateRef.value = dayjs(endDateVal).add(10, 'year').valueOf();
    }
  }
function init() {
  const cur1 = dateButtons.find(item => item.value == value1.data);
  const cur2 = statusOption.find(item => item.value == value2.data);
  const cur3 = storesOption.find(item => item.value == value3.data);


  if (curDateType.value == 3) {
    label1.value = value1.data.join('-');
  } else {
    label1.value = cur1.label;
  }
  label2.value = cur2.label;
  label3.value = cur3.label;

  // 初始化开始日期  结束日期
  if (value1.type = 3) {
    startDate.value = value1.data[0];
    endDate.value = value1.data[1];

  } else {
    const now = dayjs().format('YYYY-MM-DD');
    startDate.value = now;
    endDate.value = now;
  }

    initDateRange();

}

// 初始化
onLoad(() => {
  const type = props.modelValue[0].type;
  if (type) {
    const a = dateButtons.find(item => item.value == type);
    Object.assign(curDateType, a);
    init();
  }
})


// watch([() => value2, () => value3], (val) => {
//   console.log('@watch DropdownView', val);

//   emitFn();
// }, {
//   immediate: true,
//   deep: true
// });
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.dropdown-view {
  .slot-content {
    background-color: #fff;
  }
  // 日期下拉框
  .date-dropdown {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding: 24rpx 32rpx;
  }
  // 状态栏面板,
  .status-dropdown, .stores-dropdown {
    padding: 0 32rpx;
  }

  .date-type-area {
    display: flex;
    gap: 24rpx;

    .ui-button {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      height: 60rpx;

      &.active {
        border: 2rpx solid $primary-color;
        color: $primary-color;
        background-color: #E8EEFE;
      }

      &.customs {

        &.active {
          background-color: $bg-color;
          border: none;
          color: $text-l1-color;
        }
      }


    }
  }

  .date-show-area {
    display: flex;
    gap: 24rpx;

    .item {
      flex: 1;
    }

    .line {
      color: $text-l1-color;
    }
  }

  .buttons-area {
    display: flex;
    gap: 20rpx;

    .ui-button {
      flex: 1;
    }
  }
}
</style>
